<template>
    <view class="index">
        <Personalinfo-Box />
        <Utility-Box />
        <Tabbar-Box />
    </view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import PersonalinfoBox from './components/PersonalinfoBox.vue';
import UtilityBox from './components/UtilityBox.vue';
import TabbarBox from '../../../pages/index/components/TabbarBox.vue';
export default {
    name: 'myPage',
    components: {
        'Personalinfo-Box': PersonalinfoBox,
        'Utility-Box': UtilityBox,
        'Tabbar-Box': TabbarBox
    },
    setup() {
        const state = reactive({

        });

        return {
            ...toRefs(state),

        }
    }
}
</script>

<style lang="scss">
.index {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F7F8FA;
    bottom: 0;
    /* 在 H5 模式下将会编译成 margin-bottom: 50px，在小程序模式下则会忽略 */
    margin-bottom: taro-tabbar-height;
}
</style>
